<template>
	<view class="citys-page">
		<view class="citys-search-header">
			<!-- <view class="header-placeholder"></view> -->
			<view class="header-content">
				<uv-search
					v-model="keyword"
					height="56rpx"
					color="#2B2D2E"
					bgColor="#F5F8FA"
					:showAction="false"
					:clearabled="true"
					placeholder="搜索城市"
					@focus="showCancel = true"
				>
					<template #prefix>
						<view class="search-image">
							<image class="icon-search" src="@/static/images/icon_search.png"></image>
						</view>
					</template>
				</uv-search>
				<view
					v-if="showCancel"
					class="cancel-btn"
					@click="cancelSearch"
				>
					<text>取消</text>
				</view>
			</view>
		</view>
		<view class="citys-search-body">
			<scroll-view
				scroll-y="true"
				class="citys-search-scroll"
			>
			<view
				v-show="!showCancel"
				class="city-list"
			>
				<uv-index-list
					:index-list="indexList"
					activeColor="#ffe100"
				>
					<template #header>
						<view v-if="currentCity" class="city-location">
							<image class="icon-location" src="@/static/images/icon_city_location.png"></image>
							<view class="location-text">
								<text class="city-name">{{ currentCity }}</text>
								<text class="city-tip">当前定位</text>
							</view>
						</view>
					</template>
					<template
						v-for="(item, index) in itemList"
					>
						<view :key="index">
							<uv-index-item>
								<uv-index-anchor
									:text="indexList[index]"
									color="#999999"
									bgColor="#ffffff"
								/>
								<view
									v-for="(child, idx) in item"
									:key="idx"
									class="city-cell"
									@click="chooseCity(child)"
								>
									<view class="city-text">
										<text>{{ child.cityName }}</text>
									</view>
								</view>
							</uv-index-item>
						</view>
					</template>
				</uv-index-list>
			</view>
			<view
				v-show="showCancel"
				class="search-list-content"
			>
				<view
					v-for="(item, index) in searchList"
					:key="index"
					class="city-cell"
					@click="chooseCity(item)"
				>
					<view class="city-text">
						<text>{{ item.cityName }}</text>
					</view>
				</view>
				<view class="data-status">
					<view
						v-if="searchList.length === 0 && !loading && searched"
						class="no-data"
					>
						<image class="icon-tips" src="@/static/images/icon_order_tip.png"></image>
						<text>很抱歉，未匹配到相关城市</text>
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import debounce from '@climblee/uv-ui/libs/function/debounce.js';

export default {
	computed: {
		...mapState({
			userLocation: state => state.userLocation
		}),
		currentCity () {
			return this.userLocation.address?.city
		}
	},
	watch: {
		keyword (value) {
			if (!value) {
				this.searchList = []
			} else {
				debounce(() => {
					this.getSearchCityList(value)
				})
			}
		}
	},
	data () {
		return {
			keyword: '',
			loading: false,
			searched: false,
			showCancel: false,
			indexList: [],
			itemList: [],
			searchList: []
		}
	},
	methods: {
		async getAllCityList () {
			const [res] = await this.$apis.getAllCityList()
			if (res._errCode === '0') {
				const cityData = res._data || {}
				const indexList = []
				const itemList = []
				for (const key in cityData) {
					indexList.push(key)
					itemList.push(cityData[key])
				}
				this.indexList = indexList
				this.itemList = itemList
			}
		},
		async getSearchCityList (keyword) {
			this.loading = true
			const [res] = await this.$apis.getSearchCityList({ keyword })
			if (res._errCode === '0') {
				this.searchList = res._data || []
			}
			this.searched = true
			this.loading = false
		},
		chooseCity (cityInfo) {
			if (this.showCancel) {
				this.cancelSearch()
			}
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.emit('updateCityInfo', { data: cityInfo })
			uni.navigateBack()
		},
		cancelSearch () {
			this.showCancel = false
			if (this.keyword) {
				this.keyword = ''
			} else if (this.searchList.length) {
				this.searchList = []
			}
		}
	},
	onLoad () {
		this.getAllCityList()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
